<template>
    <div class="dining-feedback-manage">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>餐饮需求管理</span>
                </div>
            </template>

            <!-- 需求列表 -->
            <el-table :data="feedbackList" v-loading="loading" style="width: 100%">
                <el-table-column label="提交用户" width="120">
                    <template #default="scope">
                        {{ scope.row.user && scope.row.user.name ? scope.row.user.name : `用户${scope.row.userId}` }}
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="需求内容" show-overflow-tooltip/>
                <el-table-column prop="createTime" label="提交时间" width="180"/>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="scope.row.status === 0 ? 'warning' : 'success'">
                            {{ scope.row.status === 0 ? '待回复' : '已回复' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="reply" label="回复内容" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.reply || '暂无回复' }}
                    </template>
                </el-table-column>
                <el-table-column prop="replyTime" label="回复时间" width="180">
                    <template #default="scope">
                        {{ scope.row.replyTime || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            size="small"
                            :disabled="scope.row.status === 1"
                            @click="showReplyDialog(scope.row)"
                        >
                            回复
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>

        <!-- 回复对话框 -->
        <el-dialog
            v-model="dialogVisible"
            title="回复需求"
            width="50%"
            :before-close="handleClose"
        >
            <el-form :model="replyForm" ref="replyFormRef" label-width="100px">
                <el-form-item label="需求内容">
                    <el-input
                        type="textarea"
                        v-model="currentFeedback.content"
                        :rows="3"
                        disabled
                    />
                </el-form-item>
                <el-form-item
                    label="回复内容"
                    prop="reply"
                    :rules="[{ required: true, message: '请输入回复内容', trigger: 'blur' }]"
                >
                    <el-input
                        type="textarea"
                        v-model="replyForm.reply"
                        :rows="4"
                        placeholder="请输入回复内容"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitReply">
                        确认回复
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '../../../utils/axios'

const loading = ref(false)
const dialogVisible = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const feedbackList = ref([])
const replyFormRef = ref(null)
const currentFeedback = ref({})
const replyForm = ref({
    reply: ''
})

// 获取需求列表
const getFeedbackList = async () => {
    loading.value = true
    try {
        const response = await axios.get('/dining/feedback/handled', {
            params: {
                pageNum: currentPage.value,
                pageSize: pageSize.value
            }
        })
        if (response.data.code === 200) {
            feedbackList.value = response.data.result.records || []
            total.value = response.data.result.total || 0
        } else {
            ElMessage.error(response.data.msg || '获取需求列表失败')
        }
    } catch (error) {
        ElMessage.error('获取需求列表失败：' + error.message)
    } finally {
        loading.value = false
    }
}

// 显示回复对话框
const showReplyDialog = (row) => {
    currentFeedback.value = row
    replyForm.value.reply = ''
    dialogVisible.value = true
}

// 提交回复
const submitReply = async () => {
    if (!replyForm.value.reply) {
        ElMessage.warning('请输入回复内容')
        return
    }

    try {
        const response = await axios.put('/dining/feedback/reply', {
            id: currentFeedback.value.id,
            admin_reply: replyForm.value.reply,
            status: 1
        })

        if (response.data.code === 200) {
            ElMessage.success('回复成功')
            dialogVisible.value = false
            getFeedbackList()
        } else {
            ElMessage.error(response.data.msg || '回复失败')
        }
    } catch (error) {
        ElMessage.error('回复失败：' + error.message)
    }
}

// 处理对话框关闭
const handleClose = () => {
    replyForm.value.reply = ''
    dialogVisible.value = false
}

// 处理分页
const handleSizeChange = (val) => {
    pageSize.value = val
    getFeedbackList()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    getFeedbackList()
}

onMounted(() => {
    getFeedbackList()
})
</script>

<style scoped>
.dining-feedback-manage {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style> 